import React, { Component } from 'react';

// 类组件中定义组件的数据 使用state
class Car extends Component {
    constructor() {
        super()
        // 方式1: 在构造函数函数中初始化赋值,注意只能叫state
        // this.state = {
        //     username: '赵奥龙',
        //     count: 100
        // }
        console.log('constructor');
    }

    // 方式2: 以类成员属性的形式定义数据
    state = {
        username: '赵奥龙',
        count: 100
    }
    render() {
        // console.log('this', this);
        console.log('render');
        // render 生命周期初始化执行, 然后state 中的数据更新时也执行
        return (
            <div>
                <p>{this.state.username}</p>
                <p onClick={() => this.handleClickFn()} id='p1'>count:{this.state.count}</p>
            </div>
        );
    }
    // 定义事件处理函数
    handleClickFn() {
        // this.state.count++
        // 在react 中不能使用类似vue方式修改响应数据了,因为vue 人家使用object.defineProperty 或者proxy 
        // 可以监听数据的变化, 从而实现页面属性响应, 而react没有, react通过setStat({key:value}) 实现对数据的监听
        // 从而修改响应页面

        //问题? setState()方式是同步还是异步?
        // 在react 18.0之前,setState() 方式既可以是同步,也可以是异步,但是在react18.0 之后,只能是异步
        // 将setState方法写在定时器中,或者写在原生的js 事件中,这时候,setState()方式就是同步的

        // 问题?获取更新后count 
        // setState(update,()=>{}) ,参数2 为回调函数, 该回调函数当数据更新后,执行
        this.setState({
            count: this.state.count + 1
        }, () => {
            console.log('count2', this.state.count);
            console.log(document.querySelector('#p1').innerHTML);
        })
        // 输出最新的count
        console.log('count1', this.state.count);  // 输出的为更新前的值 
        console.log(document.querySelector('#p1').innerHTML);
    };
    // componentDidMount() {
    //     // 生命周期函数 相当与mounted 生命周期
    //     console.log('componentDidMount');
    //     // setTimeout(() => {
    //     //     this.setState({
    //     //         count: this.state.count + 1
    //     //     })
    //     //     console.log('定时器', this.state.count);
    //     // }, 1000)
    // }

}

export default Car;
